<template>
  <main>
    <template v-if="load_status">
      <div class="lbox">
        <div class="swiper-container banner">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(s, i) in recommend" :key="i">
              <nuxt-link :to="'/view/' + s.id + '/1'" target="_blank">
                <img :src="s.img" :alt="s.title" />
                <section>
                  <h4>{{ s.title }}</h4>
                </section>
              </nuxt-link>
            </div>
          </div>
          <!-- Add Pagination -->
          <div class="swiper-pagination"></div>
          <div class="swiper-button-next"></div>
          <div class="swiper-button-prev"></div>
        </div>
        <!-- banner end-->
        <div class="headline">
          <ul>
            <li v-for="(s, i) in likes" :key="i">
              <nuxt-link :to="'/view/' + s.id + '/1'" target="_blank">
                <img :src="s.img" :alt="s.title" />
                <span>
                  <h4>{{ s.title }}</h4>
                </span>
              </nuxt-link>
            </li>
          </ul>
        </div>
        <!--headline end-->
        <div class="clear"></div>
        <div class="h_title">最新文章</div>
        <div class="blogs">
          <ul>
            <li class="blogs_list" v-for="(s, i) in lastest" :key="i">
              <nuxt-link :to="'/view/' + s.id + '/1'" target="_blank">
                <i>
                  <!-- <img :src="s.img" :alt="s.title" /> -->
                  <v-img lazy-src="/occupying.png" :src="s.img"></v-img>
                </i>
                <h2>{{ s.title }}</h2>
              </nuxt-link>
              <p>
                {{ s.descr }}
              </p>
              <div class="blogs_writer">
                阅读:{{ s.view }}
                <span class="blogs_time">{{ s.create_at }}</span>
              </div>
              <div class="blogs_tags">
                <nuxt-link
                  :to="'/share?keywords=' + l"
                  v-for="(l, i) in s.label"
                  :key="i"
                  v-show="i < 4"
                >
                  {{ l }}
                </nuxt-link>
              </div>
              <span class="blogs_lm">{{ s.type }}</span>
            </li>
          </ul>
        </div>
      </div>
      <aside class="rbox">
        <div class="hot_news">
        <p class="h_title">原创工具</p>
        <ul>
          <li v-for="(s, i) in links" :key="i" v-show="s.type==0">
            <a :href="s.url" target="_bank">
              <h2>{{ s.title }}</h2>
            </a>
          </li>
        </ul>
      </div>
      <div class="hot_news">
        <p class="h_title">友情链接</p>
        <ul>
          <li v-for="(s, i) in links" :key="i" v-show="s.type==1">
            <a :href="s.url" target="_bank">
              <h2>{{ s.title }}</h2>
            </a>
          </li>
        </ul>
      </div>
        <!-- <div class="ad">
            <a href="https://www.aliyun.com/minisite/goods?userCode=l1qstn8f&share_source=copy_link" target="_blank"><img src="static/picture/ad.jpg" alt="阿里云优惠券" /></a>
        </div> -->
      </aside>
    </template>
    <v-alert v-else dense outlined type="error">
      {{ system_error }}
    </v-alert>
  </main>
</template>

<script>
import axios from "../utils/axios"
import Cache from "../utils/cache"
import {AuthRequest} from "../utils/auth"
export default {
  data() {
    return {
      hot: [],
      lastest: [],
      recommend: [], //推荐
      likes: [], //喜歡人數榜
      loading: true,
      load_status: true,
      system_error: "",
      info: {},
      Authorization:'',
      links: []
    };
  },
  loading: true,
  computed: {
    FileHost() {
      return process.env.FileHost;
    },
  },
  async asyncData({ app,req, params,error }) {
    
    return AuthRequest(req,'GET','home')
      .then((res) => {
        //数据获取
        if (res.code != 200) {
          console.error(res)
          return error({statusCode:res.code})
        }
        const data = res.data;
        //seo
        const info = data.info;
        app.head.title = info.title;

        app.head.meta.push({
          name: "keywords",
          content: info.keyword,
        });
        app.head.meta.push({
          name: "description",
          content: info.descr,
        });
        //数据渲染
        return {
          loading: false,
          lastest: data.lastest,
          hot: data.hot,
          recommend: data.recommend,
          links: data.links,
          likes: data.likes,
          load_status: true,
          info,
          Authorization:data.Authorization,
        };
      })
      .catch((err) => {
        //console.error(err)
        return error({statusCode:err.code})
      });
  },
  mounted() {
    Cache.set("web_info", this.info, 300);
    Cache.set("Authorization", this.Authorization, 3600*2);
    this.initSwiper();
  },
  methods: {
    initSwiper() {
      this.Swiper = new Swiper(".swiper-container", {
        pagination: ".swiper-pagination",
        nextButton: ".swiper-button-next",
        prevButton: ".swiper-button-prev",
        paginationClickable: true,
        spaceBetween: 100,
        centeredSlides: true,
        autoplay: 20000,
        autoplayDisableOnInteraction: false,
      });
    },
  },
};
</script>
<style scoped>
.blogs_lm {
  color: #ffff;
}
</style>
